<template>
  <div class="site-wrapper" >
    <div class="main-overlay"></div>
    <!-- header -->
    <header class="header-default">
      <navbar></navbar>
    </header>
    <!-- page header -->
    <section class="page-header">
      <div class="container-xl">
        <div class="text-center">
          <h1 class="mt-0 mb-2">留言版</h1>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-center mb-0">
              <li class="breadcrumb-item"><a href="#">首页</a></li>
              <li class="breadcrumb-item active" aria-current="page">留言版</li>
            </ol>
          </nav>
        </div>
      </div>
    </section>
    <!-- section main content -->
    <section class="main-content">
      <div class="container-xl">
        <div class="page-content bordered rounded padding-30">
          <!--       <img src="/source/images/other/about.jpg|}" alt="Katen Doe" class="rounded mb-4" />-->
          <p> 此路是我开，此树是我栽，</p>
          <p>要想从此过......还不快来一脚？</p>
          <p> 可在此处留言友链，只支持一级域名谢谢</p>
          <p>博客名：TARZAN-CMS</p>
          <p>链接：https://tarzan.blog.csdn.net</p>
          <p>邮箱：1334512682@qq.com</p>
          <hr class="my-4" />
          <ul class="social-icons list-unstyled list-inline mb-0">
            <li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
            <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
            <li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
            <li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
            <li class="list-inline-item"><a href="#"><i class="fab fa-medium"></i></a></li>
            <li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
          </ul>
        </div>
        <div class="spacer"></div>
        <div class="row">
          <div class="col-md-4"><!-- contact info item -->
            <div class="contact-item bordered rounded d-flex align-items-center"><span class="icon icon-phone"></span>
              <div class="details">
                <h3 class="mb-0 mt-0">手机</h3>
                <p class="mb-0">+1-202-555-0135</p>
              </div>
            </div>
            <div class="spacer d-md-none d-lg-none" data-height="30"></div>
          </div>
          <div class="col-md-4"><!-- contact info item -->
            <div class="contact-item bordered rounded d-flex align-items-center"><span class="icon icon-envelope-open"></span>
              <div class="details">
                <h3 class="mb-0 mt-0">邮箱</h3>
                <p class="mb-0">hello@example.com</p>
              </div>
            </div>
            <div class="spacer d-md-none d-lg-none" data-height="30"></div>
          </div>
          <div class="col-md-4"><!-- contact info item -->
            <div class="contact-item bordered rounded d-flex align-items-center"><span class="icon icon-map"></span>
              <div class="details">
                <h3 class="mb-0 mt-0">位置</h3>
                <p class="mb-0">河南洛阳</p>
              </div>
            </div>
          </div>
        </div>
        <div class="spacer" data-height="50"></div>
        <!--   &lt;!&ndash; section header &ndash;&gt;
           <div class="section-header">-->
        <!-- Contact Form -->
        <!--      <div class="post post-single">

              </div>-->
        <comment></comment>
        <!-- Contact Form end -->
      </div>
    </section>
    <!-- instagram feed -->
    <div class="instagram">
      <div class="container-xl"><!-- button --><a href="#" class="btn btn-default btn-instagram">@Katen on Instagram</a><!-- images -->
        <div class="instagram-feed d-flex flex-wrap">
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="/source/images/insta/insta-1.jpg" alt="insta-title" /></a></div>
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="/source/images/insta/insta-2.jpg" alt="insta-title" /></a></div>
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="/source/images/insta/insta-3.jpg" alt="insta-title" /></a></div>
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="/source/images/insta/insta-4.jpg" alt="insta-title" /></a></div>
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="/source/images/insta/insta-5.jpg" alt="insta-title" /></a></div>
          <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="/source/images/insta/insta-6.jpg" alt="insta-title" /></a></div>
        </div>
      </div>
    </div>
    <!-- footer -->
    <footer></footer>
  </div>
</template>

<script>
module.exports={
  name: "guestbook",
  components: {
    'navbar': httpVueLoader('../components/navbar.vue'),
    'footer': httpVueLoader('../components/footer.vue'),
    'comment':httpVueLoader('../components/comment.vue'),
  },
}
</script>

<style scoped>
.spacer {
  height: 50px;
}
</style>